<!--
    组件说明：
        相关props：
            tableData             - 表格数据
            table_parameters      - 对象数组每个对象包含 prop（列属性） 和 name（列名） 属性
-->
<template>
  <div>

    <!--表格区域 begin -->
    <el-table :data="tableData" stripe>

    <!-- 自定义列 begin -->
    <template v-for="(item, index) in table_parameters">
        <el-table-column  
        :key="index"
        :prop="item.prop"
        :label="item.name"
        align="center"
        v-if="item.show"
        >
        </el-table-column>
    </template>
    <!-- 自定义列 end -->

    <!-- 溯源状态列 begin  -->
    <el-table-column prop="status" label="是否溯源" min-width align="center">
      <template slot-scope="scope">
          <el-tag v-if="scope.row.statusCode == '1'" type="success">是</el-tag>
          <el-tag type="danger" v-else-if="scope.row.statusCode == '0' ">否</el-tag>
      </template>
    </el-table-column>
    <!-- 溯源状态列 end  -->

    <!-- 摄像头开关 begin -->
    <el-table-column label="状态" align="center">
      <template slot-scope="scope">
        <el-switch 
        v-model="scope.row.statusCode" 
        active-value="1" 
        inactive-value="0" 
        active-color="#13ce66" 
        inactive-color="#ff4949" 
        @change="changeCode(scope.row.id,scope.row.statusCode)">
        </el-switch>
      </template>
    </el-table-column>
    <!-- 摄像头开关 end -->

    <!-- 操作列 begin -->
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-tooltip content="修改设备" placement="top">
            <el-button 
            type="warning" 
            icon="el-icon-edit"
            size="mini" 
            @click="alterDevice(scope.row)"
            >
            </el-button>
          </el-tooltip>
          <el-tooltip content="删除设备" placement="top">
            <el-button 
            type="danger" 
            icon="el-icon-delete"
            size="mini" 
            @click="deleteDevice(scope.row.id)"
            >
            </el-button>
          </el-tooltip>
      </template>
    </el-table-column>
    <!-- 操作列 end  -->
    </el-table>
    <!--表格区域 end -->

    <!-- 修改弹窗 begin -->
    <AlterDeviceDialog :isShowDialog="isShowDialog" :rowData="rowData"></AlterDeviceDialog>
    <!-- 修改弹窗 end  -->
  </div>
</template>
<script>

// API 
import {

  // 删除设备 
  deleteMonitor,

  // 更新设备状态
  upstateMonitorStatus

   } from "@/Api/leadership/Monitoring"

// components
import AlterDeviceDialog from './AlterDeviceDialog.vue'


export default {

    components: { AlterDeviceDialog },

    // 传入从 Home.vue 组件中暴露出来的 reload属性
    inject: ["reload"],

    props: {
        tableData: Array,
        table_parameters: Array
    },
    

    data() {
        return {

            // 控制修改弹窗
            isShowDialog: {
              value: false
            },

            // 摄像头行数据
            rowData: null
        }
    },

    methods: {

      // 修改设备信息
      alterDevice(row) {
        this.isShowDialog.value = true
        this.rowData = row
      },

      // 修改设备状态
      changeCode(id, status) {        
        const data = {
          id,
          status
        }

        upstateMonitorStatus(data)
          .then((res) => {
            console.log(res);

            if( res.data.flag == true ) {
                this.reload()
                this.$message({
                    type: 'success',
                    message: '状态更新成功'
                })
            } else {
              this.$message({
                    type: 'error',
                    message: '状态更新失败'
                })
            }

          })

      },

      // 根据设备 id 删除设备
      deleteDevice(id) {

        this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'  
        })
        .then(() => {

          deleteMonitor(id).then((res) => {

              if( res.data.flag == true ) {
                  console.log('删除成功',res);

                  this.reload()

                  this.$message({
                      type: 'success',
                      message: '删除成功'
                  })
              }

          }) 

        })
        .catch(() => {

          this.$message({
            type: 'info',
            message: '已取消删除'
          }); 

        })
        
      }
    }
}
</script>

<style>

</style>